<template>
  <g
    class="text-button"
    style="cursor: pointer;"
    :transform="props.transform"
    @mouseenter="props.onMouseEnter"
    @mouseleave="props.onMouseLeave"
    @click="props.onClick"
  >
    <rect
      class="text-area"
      :width="props.content.length * CHAR"
      :height="CHAR"
      fill="transparent"
    />
    <Text
      :content="props.content"
      :fill="props.active || (props.tag && props.tag === props.activeTag) ? props.activeFill : props.fill"
    />
  </g>
</template>

<script setup>
  import { computed } from 'vue'
  import { CHAR } from '@/utils/global'
  import Text from './Text.vue'

  const props = defineProps({
    tag: {
      type: String,
      default: ''
    },
    activeTag: {
      type: String,
      default: ''
    },
    transform: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    fill: {
      type: String,
      default: '#fff'
    },
    activeFill: {
      type: String,
      // default: '#85E89D'
      default: '#E79C21'
    },
    active: {
      type: Boolean,
      default: false,
    },
    onMouseEnter: {
      type: Function,
      default: () => {}
    },
    onMouseLeave: {
      type: Function,
      default: () => {}
    },
    onClick: {
      type: Function,
      default: () => {}
    },
  })
</script>

<style lang="scss" scoped>
  
</style>